<template>
    <div class="header">
        <div class="left">
            控制台
        </div>
        <div class="right">
            <nuxt-link to="/" class="link main">
                主页
            </nuxt-link>
            <div class="link alert">
                <a-badge dot>
                    <a-icon type="download" class="alert-icon" @click="download" />
                </a-badge>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
    computed: {
        ...mapState({
            'clear': state => state.dashBoard.clear
        })
    },
    methods: {
        ...mapMutations({
            'setClear': 'dashBoard/setClear'
        }),
        download() {
            this.$api.dashBoard.download().then((res) => {
                this.$message.success('保存成功')
                this.setClear(true)
            }).catch((err) => {
                console.log(err)
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.header {
    box-sizing: border-box;
    height: var(--header-height);
    position: fixed;
    top: 0;
    border: none;
    background-color: var(--dark-blue);
    color: var(--light-font-white);
    width: 100vw;
    padding: 1vh 1vw;
    font-weight: lighter;
    .left {
        float: left;
        color: var(--light-font-white);
        height: 8vh;
        line-height: 8vh;
        text-align: center;
        font-size: 1.4rem;
        letter-spacing: 1px;
    }
    .right {
        float: right;
        padding: 1vh 3vw;
        box-sizing: border-box;
        .link {
            box-sizing: border-box;
            display: block;
            transition: all 0.1s linear;
            float: left;
            height: 6vh;
            line-height: 6vh;
            font-size: 1.1rem;
            border: 3px solid transparent;
            margin: 0 1vw;
            &.nuxt-link-exact-active{
                color: var(--light-font-white);
                border-bottom: 2px solid white;
            }

            &.alert {
                cursor: pointer;
                line-height: 5vh;
                padding-top: 1vh;
                .alert-icon{
                    font-size: 1.5rem;
                }
            }
        }
    }
}
</style>
